<template>
  <view class="content column">
    <up-cell-group :customStyle="{ margin: '16rpx 0' }" :border="false">
      <up-cell :title="`订单编号：${id}`" titleStyle="color: #6D6A6A;"></up-cell>
      <up-cell :title="`${name} ${number}`" titleStyle="font-Weight: bolder;">
        <template #icon>
          <image :src="icon" mode="scaleToFill" style="height: 48rpx; width: 48rpx; margin-top: -8rpx;" />
        </template>
      </up-cell>
    </up-cell-group>
    <up-steps direction="column" activeColor="#1B1A1A">
      <up-steps-item v-for="(item, index) in list" :key="item.id">
        <template #icon>
          <text class="slot-icon" :style="{ backgroundColor: index === 0 ? '#1B1A1A' : '#fff' }"></text>
        </template>
        <template #title>
          <up-text :bold="index === 0" type="main" :text="item.logisticsInfo" size="24" lineHeight="44rpx"></up-text>
        </template>
        <template #desc>
          <up-text type="main" :text="item.createTime" size="24"></up-text>
        </template>
      </up-steps-item>
    </up-steps>
  </view>
</template>

<script>
import { getExpressTracking } from '@/services/order';
import expressTrackingIcon from '@/static/expressTrackingIcon.png'

export default {
  onLoad(options) {
    const { id } = options || {};
    const _that = this;
    uni.showToast({
      title: '加载中',
      icon: 'none',
      mask: true,
      duration: 100000000,
    })
    getExpressTracking({
      id
    }).then((res) => {
      const { success, data } = res || {};
      if (success) {
        const { orderId, name, number, list } = data;
        _that.id = orderId;
        _that.name = name;
        _that.number = number;
        _that.list = list;
      }
    }).finally(() => {
      uni.hideToast();
    })
  },
  data() {
    return {
      list: [],
      id: '',
      name: '',
      number: '',
      icon: expressTrackingIcon,
    };
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.content{
  padding: 30rpx;
  width: calc(100% - 60rpx);
}
.slot-icon {
  width: 24rpx;
  height: 24rpx;
  border-radius: 12rpx;
  border: 1rpx solid #BBBBBB;
}
</style>
